/**
*选择功能
*/
<template>
    <vp-dialog ref="editDialogRef" :span="1">
        <template #title> <vp-label zh="权限配置" en="Perm Config" align="left"/></template>
        <span class="mb5">
            自动选择子节点/Automatically select child nodes
            <el-switch
                class="mb5"
                v-model="autoSelectChildren"
            >
            </el-switch>
        </span>
        <el-tree :data="tableData"
            v-loading = "loading"
            ref = "treeRef"
            show-checkbox
            node-key="id"
            default-expand-all
            :default-checked-keys="treeDefaultChecked"
            :check-strictly="true"
            @check="handleTreeCheck"
        >
            <template #default="{node, data}">
                {{ node.label + (data.type === '1' ? ("/" +data.labelEn): "" ) }}
            </template>
        </el-tree>
        <template #footer>
            <vp-btn-confirm :loading="saveLoading" @click="handleSave"/>
        </template>
    </vp-dialog>
</template>
<script setup lang="ts" name="editPermission">
import { defineComponent,reactive,toRefs,ref,onMounted } from 'vue'
import request from '/@/utils/request';

    const emits = defineEmits(['formSubmited']);   

    const loading = ref(false);
    const saveLoading = ref(false);
    const id = ref("");
    const tableData = ref([]);
    const treeDefaultChecked = ref([] as string[]);
    const autoSelectChildren = ref(false);

    const editDialogRef = ref();
    const handleOpen = (_id: string)=>{
        id.value = _id;
        tableData.value = [];
        treeDefaultChecked.value = [];
        init(id.value);
        editDialogRef.value.handleOpen();
    }

    const init = (id: string)=>{
        loading.value = true;
        request.get(`/system/role/permission/${id}`).then((res)=>{
            tableData.value = res?.data || [];
            treeDefaultChecked.value = getDefaultChecked(tableData.value);
        }).finally(()=> loading.value=false);
    }

    const getDefaultChecked = (data: any)=>{
        let defaultChecked = [] as string[];
        data.forEach((value: any) => {
            if(value.checked){
                defaultChecked.push(value.id);
            }
            if(value.children && value.children.length > 0){
                defaultChecked = defaultChecked.concat(getDefaultChecked(value.children));
            }
        });
        return defaultChecked;
    }

    const treeRef = ref();

    const handleSave = ()=>{
        if(loading.value){
            return;
        }
        let checkedArray = treeRef.value.getCheckedNodes();
        checkedArray = checkedArray.concat(treeRef.value.getHalfCheckedNodes());
        if(checkedArray.length == 0){
            return;
        }
        saveLoading.value = true;
        request.post(`/system/role/permission/${id.value}`,checkedArray).then(()=>{
            emits("formSubmited");
            editDialogRef.value.handleClose();
        }).finally(()=>{
            saveLoading.value = false;
        })
    }
    //树checkbox点击事件
    const handleTreeCheck = (node: any, checked:any)=>{
        let flag = checked.checkedKeys.includes(node.id);
        if(flag){
            //选中则将上级节点设置选中
            let treeNode = treeRef.value.getNode(node.id);
            while(treeNode.parent){
                treeNode = treeNode.parent;
                treeRef.value.setChecked(treeNode, true, false);
            }

            //自动勾选子节点时将子节点连动
            if(autoSelectChildren.value){
                cascadeTreeChildCheck(node.children, true)
            }
        }else{
            //取消选中将子节点全部取消选中
            cascadeTreeChildCheck(node.children, false)
        }
    }

    //级联处理子节点勾选
    const cascadeTreeChildCheck = (children: [], flag: boolean)=>{
        if(children && children.length > 0){
            children.forEach((child:any) => {
                treeRef.value.setChecked(child.id, flag, false);
                cascadeTreeChildCheck(child.children, flag);
            });
        }
    }

    defineExpose({
        handleOpen,
    })


</script>
